<template>
	<view class="feedback-wrap">
		<view class="case module-wrap">
			<view class="title bold">
				反馈模块
			</view>
			<view class="module-list clear">
				<text :class="{'item pull-left text-center': true, 'checked': index===checkedType}" v-for="(item, index) in moduleList"
				 :key="index" @click="handleChecked(item.type)">
					{{item.name}}
				</text>
			</view>
		</view>
		<view class="case content-wrap">
			<view class="title bold">
				反馈内容
			</view>
			<view class="content">
				<textarea class="textarea w100" placeholder="请填写反馈内容" :maxlength="maxlength" v-model="form.introduce"></textarea>
			</view>
		</view>
		<view class="case upload-wrap">
			<view class="title bold">
				图片上传
			</view>
			<view class="image-wrap flex-x-start">
				<view class="image-item inline-block relative" :key="index" v-for="(item, index) in form.photos" :style="{'margin-right': form.photos.length===2 ? '0' : '31rpx'}">
					<image class="image w100 h100" v-if="form.photos.length" :src="`${host}/${item}`"></image>
					<text class="iconfontPT iconshanchutupian delete white" @click="handleDeleteImg(item,false)"></text>
				</view>
				<view class="choose-image flex-y-center" @click="handleChooseImage">
					<text class="iconfontPT iconhao block"></text>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button class="confirm-btn" hover-class="hoverClass" @click="handleAddFeedback">
				提交反馈
			</button>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import {
		addFeedback
	} from '../../../apis/personal/index.js';

	export default {
		data() {
			return {
				checkedType: 0,
				form: {
					module: '',
					introduce: '',
					photos: []
				},
				rules: {
					introduce: [{
						required: true,
						message: '请输入反馈内容',
					}],
					photos: [{
						required: true,
						message: '请上传反馈图片',
					}],
				},
				moduleList: [{
						name: '新车',
						type: 1
					},
					{
						name: '二手车',
						type: 2
					},
					{
						name: '生活圈',
						type: 3
					},
					{
						name: '门店',
						type: 4
					},
					{
						name: '招聘',
						type: 5
					}
				]
			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		methods: {
			handleChooseImage() {
				let _this = this
				this.$uploadImage({imageCompressFn: this.$refs.imageCompress.start})
					.then(response => {
						_this.form.photos.push(response)
					})
			},
			handleAddFeedback() {
				let _this = this,
					images = this.form.photos.join(','),
					params = {
						images,
						content: this.form.introduce,
						type: this.checkedType + 1
					};
				this.$verification(_this.form, _this.rules, ok => {
					if (ok) {
						_this.$loading.show()
						addFeedback(params).then(res => {
							_this.$loading.hide();
							if (+res.code === 1) {
								uni.showToast({
									title: res.info,
									icon: 'success'
								})

								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					}
				})
			},
			handleChecked(i) {
				this.checkedType = --i
			}
		}
	}
</script>

<style lang="less">
	.feedback-wrap {
		padding: 30rpx;

		.title {
			padding: 30rpx 0;
			font-size: 36rpx;
			color: #333333;
		}

		.module-list {
			font-size: 30rpx;
			margin: 0 -5px;

			.item {
				width: 155rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #f8f8f8;
				margin-bottom: 25rpx;
				color: #999999;
				margin-left: 10rpx;
				margin-right: 10rpx;

				&.checked {
					background: #2C2626;
					color: #ffffff;
				}
			}
		}

		.upload-wrap {
			margin-bottom: 15px;
			border-bottom: 1rpx solid rgba(206, 206, 206, 0.5);
			padding-bottom: 20rpx;

			.image-wrap {
				.choose-image {
					width: 224rpx;
					height: 224rpx;
					border: 2rpx dashed #CCCCCC;
					border-radius: 10rpx;
				}

				.image-item {
					width: 224rpx;
					height: 224rpx;
				}
			}
		}

		.btn-wrap {
			.confirm-btn {
				background: rgba(228, 24, 5, 1);
				border-radius: 12rpx;
				color: #ffffff;
			}
		}
	}
</style>
